<template>
	<z-paging ref="paging" class="app-container" :fixed="false" refresher-only @query="getData">
		<view class="banner-box">
			<swiper class="swiper-box" circular autoplay @change="handleSwiperChange">
				<swiper-item v-for="(item, index) in detail.slides" :key="index">
					<image class="cover-image" :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="custom-indicator-dots">{{ currentSwiper }} / {{ detail.slides ? detail.slides.length : 0 }}
			</view>
		</view>
		<view class="basic-box">
			<view class="title-box flex">
				<text class="title flex-1 line-1">{{ detail.name }}</text>
				<view class="icon-box flex-column" @click="handleCollectHotel">
					<uni-icons v-if="isCollect === 0" type="heart" color="#A1A7B3" size="36rpx"></uni-icons>
					<uni-icons v-if="isCollect === 1" type="heart-filled" color="var(--primary-color)"
						size="36rpx"></uni-icons>
					<text class="icon-text">收藏</text>
				</view>
			</view>
			<view class="introduce">{{ detail.desc || "暂无描述" }}</view>
			<view class="tag-list flex">
				<view v-if="!detail.flags.length" class="tag-item">未设置标签</view>
				<view v-for="(item, index) in detail.flags" :key="index" class="tag-item">{{ item }}</view>
			</view>
			<view class="cell-item flex">
				<image class="icon" src="/static/icons/time-icon.png" mode="widthFix" />
				<view class="content-box flex-1 flex-column">
					<text class="content">{{ detail.open_hours || "未设置开放时间" }}</text>
				</view>
			</view>
			<view class="cell-item flex">
				<image class="icon" src="/static/icons/address-fill-icon.png" mode="widthFix" />
				<view class="content-box flex-1 flex-column">
					<text class="content">{{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.address }}</text>
					<text class="desc">距您{{ formatDistance(detail.distance) }}</text>
				</view>
				<view class="action-box flex">
					<view class="action-item flex-column"
						@click="handleNavigation(detail.name, detail.lat, detail.lng)">
						<image class="icon" src="/static/icons/navigation-icon.png" mode="aspectFill" />
						<text>导航</text>
					</view>
					<view class="action-item flex-column" @click="handleCallPhone(detail.tel)">
						<image class="icon" src="/static/icons/phone-icon.png" mode="aspectFill" />
						<text>电话</text>
					</view>
				</view>
			</view>
		</view>
		<view class="room-list-title">酒店房型</view>
		<view class="room-list">
			<view v-for="item in roomList" :key="item.id" class="room-item flex" @click="handleRoomDetail(item)">
				<image class="room-img" :src="item.image" mode="aspectFill" />
				<view class="content-box flex-column">
					<view class="room-name line-1">{{ item.name }}</view>
					<view class="room-desc line-1">{{ item.cpu }} / {{ item.card }} / {{ item.memory }} /
						{{ item.monitor }}
					</view>
					<view class="room-desc line-1">{{ item.area }} / {{ item.bed_num }} / {{ item.window }}</view>
				</view>
			</view>
		</view>
		<uni-popup class="room-popup" ref="popup" type="bottom" background-color="#F2F4F7">
			<view class="title-box flex">
				<text class="room-name line-1">{{ roomDetail.name }}</text>
				<image class="close-icon" src="/static/icons/close-icon.png" mode="aspectFill"
					@click="handleClosePopup" />
			</view>
			<view class="room-img">
				<image class="cover-image" :src="roomDetail.image" mode="aspectFill"></image>
			</view>
			<view class="room-info">
				<view class="title-box">房型设施</view>
				<view class="info-item flex">
					<text class="label">CPU</text>
					<text class="value line-1">{{ roomDetail.cpu }}</text>
					<text class="label">内存</text>
					<text class="value line-1">{{ roomDetail.memory }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">显示器</text>
					<text class="value line-1">{{ roomDetail.monitor }}</text>
					<text class="label">显卡</text>
					<text class="value line-1">{{ roomDetail.card }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">分辨率</text>
					<text class="value line-1">{{ roomDetail.resolution }}</text>
					<text class="label">刷新率</text>
					<text class="value line-1">{{ roomDetail.refresh }}</text>
				</view>
				<view class="line"></view>
				<view class="info-item flex">
					<text class="label">床型</text>
					<text class="value line-1">{{ roomDetail.bed }}</text>
					<text class="label">可住</text>
					<text class="value line-1">{{ roomDetail.person }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">床数</text>
					<text class="value line-1">{{ roomDetail.bed_num }}</text>
					<text class="label">楼层</text>
					<text class="value line-1">{{ roomDetail.floor }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">面积</text>
					<text class="value line-1">{{ roomDetail.area }}</text>
					<text class="label">窗户</text>
					<text class="value line-1">{{ roomDetail.window }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">吸烟</text>
					<text class="value line-1">{{ roomDetail.smoke }}</text>
					<text class="label">宽带</text>
					<text class="value line-1">{{ roomDetail.broadband }}</text>
				</view>
				<view class="info-item flex">
					<text class="label">WIFI</text>
					<text class="value line-1">{{ roomDetail.wifi }}</text>
				</view>
			</view>
		</uni-popup>
	</z-paging>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		getHotel,
		collect
	} from "@/api";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import store from "@/store";
	import {
		showNotLoginModal
	} from "@/utils";

	const state = reactive({
		queryParams: {
			id: "",
			lat: "",
			lng: ""
		},
		currentSwiper: 1,
		detail: {},
		roomList: [],
		roomDetail: {},
		isCollect: 0
	});

	const {
		queryParams,
		currentSwiper,
		detail,
		roomList,
		roomDetail,
		isCollect
	} = toRefs(state);

	const paging = ref(null);
	const popup = ref(null);

	// 轮播图滚动事件
	function handleSwiperChange(e) {
		currentSwiper.value = e.detail.current + 1;
	}

	// 获取附近酒店详情
	async function getHotelData() {
		const res = await getHotel(queryParams.value);
		res.data.info.flags = res.data.info.flags ? res.data.info.flags.split(",") : [];
		detail.value = res.data.info;
		roomList.value = res.data.room_detail;
		isCollect.value = res.data.is_collect;
		paging.value.complete();
	}

	// 收藏酒店
	async function handleCollectHotel() {
		if (!store.state.isLogin) {
			await store.dispatch("GetUserInfo")
			if (!store.state.isLogin) return showNotLoginModal();
		}
		const res = await collect({
			id: detail.value.id
		});
		let toast = res.data.type === 1 ? "收藏成功" : "取消成功";
		isCollect.value = res.data.type === 1 ? 1 : 0
		uni.showToast({
			title: toast,
			icon: "none"
		})
	}

	// 房型详情
	function handleRoomDetail(item) {
		roomDetail.value = item;
		popup.value.open();
	}

	// 关闭弹窗
	function handleClosePopup() {
		popup.value.close();
	}

	// 获取数据
	function getData() {
		if (uni.getSystemInfoSync().platform === "devtools") {
			// 微信开发者工具无法获取定位
			getHotelData();
			return;
		}
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				queryParams.value.lat = res.latitude.toFixed(6);
				queryParams.value.lng = res.longitude.toFixed(6);
				getHotelData();
			},
			fail: async (err) => {
				await openSetting();
				getHotelData();
			}
		});
	}

	onLoad((option) => {
		queryParams.value.id = option.id;
	})

	onShow(() => {
		getData();
	})
</script>

<style scoped lang="scss">
	.app-container {
		.banner-box {
			position: relative;
			z-index: -1;

			.swiper-box {
				width: 100%;
				height: 500rpx;
			}

			.custom-indicator-dots {
				position: absolute;
				right: 20rpx;
				bottom: 70rpx;
				color: #FFFFFF;
				font-size: 20rpx;
			}
		}

		.basic-box {
			margin: -50rpx 20rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			z-index: 1;
			padding: 30rpx;

			.title-box {
				.title {
					font-size: 40rpx;
					font-weight: bold;
				}

				.icon-box {
					.icon-text {
						font-size: 18rpx;
						color: #A1A7B3;
					}
				}
			}

			.introduce {
				font-size: 24rpx;
				line-height: 1.8;
				margin-top: 10rpx;
				margin-bottom: 30rpx;
			}

			.tag-list {
				gap: 10rpx;
				margin-bottom: 30rpx;
				flex-wrap: wrap;

				.tag-item {
					color: #A1A7B3;
					font-size: 20rpx;
					padding: 0 20rpx;
					border-radius: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #F2F4F7;
				}
			}

			.cell-item {
				align-items: flex-start;
				column-gap: 20rpx;

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-top: 16rpx;
				}

				.content-box {

					.content {
						font-size: 24rpx;
						line-height: 60rpx;
						font-weight: bold;
					}

					.desc {
						font-size: 20rpx;
					}
				}

				.action-box {
					column-gap: 20rpx;

					.action-item {
						row-gap: 5rpx;
						font-size: 20rpx;

						.icon {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}
		}

		.room-list-title {
			font-size: 36rpx;
			font-weight: bold;
			margin: 30rpx 20rpx;
		}

		.room-list {
			margin: 0 20rpx;

			.room-item {
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				column-gap: 30rpx;

				.room-img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
					flex-shrink: 0;
				}

				.content-box {
					height: 140rpx;
					justify-content: center;
					row-gap: 14rpx;
					overflow: hidden;

					.room-name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.room-desc {
						font-size: 24rpx;
						color: var(--gray-font-color);
					}
				}
			}
		}

		.room-popup {
			background-color: red;

			::v-deep .uni-popup {

				uni-transition>view {
					border-radius: 20rpx 20rpx 0 0;
					overflow: hidden;

					.uni-popup__wrapper {
						padding: 0 20rpx;

						.title-box {
							height: 100rpx;
							position: relative;
							justify-content: center;

							.room-name {
								font-size: 36rpx;
								font-weight: bold;
							}


							.close-icon {
								position: absolute;
								top: 0;
								bottom: 0;
								right: 0;
								margin: auto 0;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.room-img {
							width: 100%;
							height: 400rpx;
							border-radius: 20rpx;
							overflow: hidden;
						}

						.room-info {
							background-color: #FFFFFF;
							padding: 30rpx;
							border-radius: 20rpx;
							margin-top: 20rpx;

							.title-box {
								font-size: 30rpx;
								font-weight: bold;
								position: relative;
								padding-left: 15rpx;
								margin-bottom: 30rpx;
								height: unset;

								&::before {
									content: "";
									width: 6rpx;
									height: 24rpx;
									border-radius: 3rpx;
									display: block;
									background-color: var(--primary-color);
									position: absolute;
									left: 0;
									top: 10rpx;
								}
							}

							.info-item {
								font-size: 26rpx;
								column-gap: 20rpx;
								margin-bottom: 20rpx;

								&:last-of-type {
									margin-bottom: 0;
								}

								.label {
									color: var(--gray-font-color);
									width: 100rpx;
								}

								.value {
									flex: 1;
									overflow: hidden;
								}
							}

							.line {
								width: 100%;
								height: 2rpx;
								background-color: #F2F4F7;
								margin-bottom: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>